<template>
  <table>
    <tr>
      <th style="width: 60px;">员工姓名</th>
      <th style="width: 60px;">初始密码</th>
      <th style="width: 40px;">工号</th>
      <th style="width: 80px;">职务</th>
      <th style="width: 110px;">部门</th>
      <th style="width: 100px;">手机号码</th>
      <th style="width: 120px;">邮箱</th>
      <th style="width: 40px;">短号</th>
      <th style="width: 120px;">联系电话</th>
      <th style="width: 40px;">生日</th>
    </tr>
    <tr v-for="n in errorLength" class="error-tr">
      <td>
        <input
          @change="changeError(n - 1, $event, 'mName')"
          v-tooltip="errorData[n - 1].nameDescription || '正确'"
          class="input-n160"
          style="width: 60px;"
          :class="{'error': errorData[n - 1].nameDescription}"
          :value="errorData[n - 1].mName"/>
      </td>
      <td>
        <input
          class="input-n160"
          style="width: 60px;"
          @change="changeError(n - 1, $event, 'pwd')"
          v-tooltip="errorData[n - 1].pwdDescription || '正确'"
          :class="{'error': errorData[n - 1].pwdDescription}"
          :value="errorData[n - 1].pwd"/></td>
      <td>
        <input
          class="input-n160"
          style="width: 40px;"
          @change="changeError(n - 1, $event, 'jobnumber')"
          v-tooltip="errorData[n - 1].jobNumberDescription || '正确'"
          :class="{'error': errorData[n - 1].jobNumberDescription}"
          :value="errorData[n - 1].jobnumber"/></td>
      <td>
        <input
          class="input-n160"
          style="width: 80px;"
          @change="changeError(n - 1, $event, 'position')"
          v-tooltip="errorData[n - 1].positionDescription || '正确'"
          :class="{'error': errorData[n - 1].positionDescription}"
          :value="errorData[n - 1].position"/></td>
      <td>
        <input
          class="input-n160"
          style="width: 110px;"
          @change="changeError(n - 1, $event, 'department')"
          v-tooltip="errorData[n - 1].departmentDescription || '正确'"
          :class="{'error': errorData[n - 1].departmentDescription}"
          :value="errorData[n - 1].department"/></td>
      <td><input
        class="input-n160"
        style="width: 120px;"
        @change="changeError(n - 1, $event, 'mobile')"
        v-tooltip="errorData[n - 1].mobileDescription || '正确'"
        :class="{'error': errorData[n - 1].mobileDescription}"
        :value="errorData[n - 1].mobile"/>
      </td>
      <td>
        <input
          class="input-n160"
          style="width: 120px;"
          @change="changeError(n - 1, $event, 'email')"
          v-tooltip="errorData[n - 1].emailDescription || '正确'"
          :class="{'error': errorData[n - 1].emailDescription}"
          :value="errorData[n - 1].email"/></td>
      <td>
        <input
          class="input-n160"
          style="width: 40px;"
          @change="changeError(n - 1, $event, 'short_code')"
          v-tooltip="errorData[n - 1].shorcodeDescription || '正确'"
          :class="{'error': errorData[n - 1].shorcodeDescription}"
          :value="errorData[n - 1].short_code"/></td>
      <td>
        <input
          class="input-n160"
          style="width: 120px;"
          @change="changeError(n - 1, $event, 'link_tele')"
          v-tooltip="errorData[n - 1].linktelDescription || '正确'"
          :class="{'error': errorData[n - 1].linktelDescription}"
          :value="errorData[n - 1].link_tele"/></td>
      <td>
        <input
          class="input-n160"
          style="width: 80px;"
          @change="changeError(n - 1, $event, 'birthday')"
          v-tooltip="errorData[n - 1].birthdayDescription || '正确'"
          :class="{'error': errorData[n - 1].birthdayDescription}"
          :value="errorData[n - 1].birthday | date"/></td>
    </tr>
  </table>
</template>

<script>
  export default {
    name: 'workerFtl',
    data () {
      return {
        errorData: [],
        errorLength: 0,
        errorMap: new Map()
      }
    },
    props: {
      errorPropsData: '',
      changeBut: {
        type: Number,
        default: 0
      },
      mobileStatus: '',
      emailStatus: '',
      baseUrl: ''
    },
    watch: {
      changeBut () {
        this.batchAdd()
      }
    },
    mounted () {
      this.errorData = this.errorPropsData
      this.setErrorList()
    },
    methods: {
      setErrorList () {
        this.errorLength = this.errorData.length
        this.errorData.forEach((el, i) => {
          this.errorMap.set(i, el)
        })
      },
      changeError (key, e, value) {
        let obj = this.errorMap.get(key)
        if (obj) {
          let val = e.target.value
          obj[value] = val
        }
      },
      batchAdd () {
        let items = [...this.errorMap.values()]
        let list = []
        items.forEach(x => {
          const birthday = this.$moment(x.birthday).format('YYYY/MM/DD')
          list.push(`${x.mName},${x.pwd},${x.jobnumber},${x.position},${x.department},${x.mobile},${x.email},${x.short_code},${x.link_tele},${x.sex === 1 ? '男' : '女'},${birthday},${this.mobileStatus},${this.emailStatus},${x.summary}`)
        })
        let data = {
          'form.lines': list
        }
        this.$axios({
          method: 'post',
          url: `${this.baseUrl}/manage/batchAdd.htm`,
          data: this.$qs.stringify(data, {indices: false})
        }).then(res => {
          if (res.data.errorData.length > 0) {
            this.errorData = res.data.errorData
          } else {
            this.$message.success('导入成功')
            this.$emit('success')
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .error-tr{
    .error{
      border: 1px $red solid;
    }
  }
</style>
